#parse('/user/head.html')

<div class="header">
	<div id="messageBox" class="alert alert-error" style='display:none'>
		<label class="error"></label>
	</div>
</div>
<h1 class="form-signin-heading icon-wondering">$lang.get('user.forget')</h1>
<ul id="forget_tab" class="nav nav-tabs">
   <li class="active">
      <a href="#forget_byemail" data-toggle="tab">
         $lang.get('tab.forget.byemail')
      </a>
   </li>
   <li>
   	<a href="#forget_byphone" data-toggle="tab">
   		$lang.get('tab.forget.byphone')
   	</a>
   </li>
</ul>

<div id="forget_tab_content" class="tab-content">
	<div class='tab-pane fade in active' id='forget_byemail'>
		<div class="form-signin">
			<div class='form-group'>
				<label class="input-label icon-mail" for="email">$lang.get('user.email')</label>
				<input type="email" id="email" name="email" class="form-control" required />
			</div>
			
			<div id='pemailcode' class='form-group' style='display:none'>
				<label class="input-label" for="emailcode">$lang.get('email.code')</label>
				<input type="text" id="emailcode" name="emailcode" class="form-control" required />
			</div>
			
			<div id='ppasswd1' class='form-group' style='display:none'>
				<label class="input-label" for="passwd1">$lang.get('email.code')</label>
				<input type='text' style='display:none'/>
				<input type="password" id="passwd1" name="passwd1" class="form-control" onchange="_passwd1()" />
			</div>

			<div id='ppasswd2' class='form-group' style='display:none'>
				<label class="input-label" for="passwd2">$lang.get('email.code')</label>
				<input type='text' style='display:none'/>
				<input type="password" id="passwd2" name="passwd2" class="form-control" onchange="_passwd1()" />
			</div>
			
			<button class="btn btn-large btn-primary btn-block" onclick="byemail()">$lang.get('btn.ok')</button>
			
			<div id="themeSwitch">
				<a class="icon-wink" href="/user/login">$lang.get('a.login')</a>
			</div>
		</div>
	</div>
	
	<div class='tab-pane fade' id='forget_byphone'>
		<div class="form-signin">
			<div class='from-group'>
				<label class="input-label icon-mobile" for="phone">$lang.get('user.phone')</label>
				<input type="tel" id="phone" name="phone" class="form-control" required />
			</div>
			<div id='pphonecode' class='from-group' style='display:none'>
				<label class="input-label" for="phonecode1">$lang.get('user.code')</label>
				<input type="text" id="phonecode1" name="phonecode1" class="form-control" />
			</div>
			<div id='ppasswd21' class='from-group' style='display:none'>
				<label class="input-label" for="passwd21">$lang.get('user.passwd1')</label>
				<input type="password" id="passwd21" name="passwd21" class="form-control" onchange="_passwd2()"/>
			</div>
			<div id='ppasswd22' class='from-group' style='display:none'>
				<label class="input-label" for="passwd22">$lang.get('user.passwd2')</label>
				<input type="password" id="passwd22" name="passwd22" class="form-control" onchange="_passwd2()"/>
			</div>
					
			<button class="btn btn-large btn-primary btn-block" onclick="byphone()">$lang.get('btn.ok')</button>

			<div id="themeSwitch">
				<a class="icon-wink" href="/user/login">$lang.get('a.login')</a>
			</div>
		</div>
	</div>
</div>

<div class="footer">
	$lang.get('copyright') - $lang.get('powerby') 
</div>

<script>
function _passwd1() {
	var p1 = $('#passwd1').val();
	var p2 = $('#passwd2').val();
	if(p1 != p2) {
		$('#passwd1').parent().addClass('has-error');
		$('#passwd2').parent().addClass('has-error');
	} else if(p1.length < 1) {
		$('#passwd1').parent().addClass('has-error');
		$('#passwd2').parent().addClass('has-error');
	} else {
		$('#passwd1').parent().removeClass('has-error');
		$('#passwd2').parent().removeClass('has-error');
		$('#passwd1').parent().addClass('has-success');
		$('#passwd2').parent().addClass('has-success');
	}
}

function _passwd2() {
	var p1 = $('#passwd21').val();
	var p2 = $('#passwd22').val();
	if(p1 != p2) {
		$('#passwd21').parent().addClass('has-error');
		$('#passwd22').parent().addClass('has-error');
	} else if(p1.length < 1) {
		$('#passwd21').parent().addClass('has-error');
		$('#passwd22').parent().addClass('has-error');
	} else {
		$('#passwd21').parent().removeClass('has-error');
		$('#passwd22').parent().removeClass('has-error');
		$('#passwd21').parent().addClass('has-success');
		$('#passwd22').parent().addClass('has-success');
	}
}

var emailphase = 0;
function byemail(){
	var p = {};
	p.email = $('#email').val();
	p.phase = emailphase;
	if(emailphase == 1) {
		p.code = $('#emailcode').val();
	} else if(emailphase == 2) {
		var p1 = $('#passwd1').val();
		var p2 = $('#passwd2').val();
		var e = $('#messageBox');
		if(p1 != p2) {
			e.find('label').html("$lang.get('user.passwd.nosame')");
			e.show();
			$('#passwd1').parent().addClass('has-error');
			$('#passwd2').parent().addClass('has-error');
			return;
		} else if(p1.length < 1) {
			e.find('label').html("$lang.get('user.passwd.empty')");
			e.show();
			$('#passwd1').parent().addClass('has-error');
			$('#passwd2').parent().addClass('has-error');
			return;
		}
		p.passwd = p1;
	}
	$.post('/user/forget', p, function(d){
		var e = $('#messageBox');
		e.find('label').html(d.message);
		e.show();
		if(d.state == 200) {
			if(emailphase == 0) {
				$('#pemailcode').show();
				emailphase = 1;
			} else if(emailphase == 1) {
				$('#pemailcode').hide();
				$('#email').attr('readonly', 'readonly');
				$('label[for=email]').hide();
				$('#email').parent().addClass('has-success');
				$('#ppasswd1').show();
				$('#ppasswd2').show();
				emailphase = 2;
			} else if(emailphase == 2) {
				//ok
				setTimeout(function(){
					location.href = '/user/login';
				}, 2000);
			}
		}
	});
}

var phonephase = 0;
function byphone(){
	var p = {};
	p.phone = $('#phone').val();
	p.phase = phonephase;
	if(phonephase == 1) {
		p.code = $('#phonecode1').val();
	} else if(phonephase == 2) {
		var p1 = $('#passwd21').val();
		var p2 = $('#passwd22').val();
		var e = $('#messageBox');
		if(p1 != p2) {
			e.find('label').html("$lang.get('user.passwd.nosame')");
			e.show();
			$('#passwd21').parent().addClass('has-error');
			$('#passwd22').parent().addClass('has-error');
			return;
		} else if(p1.length < 1) {
			e.find('label').html("$lang.get('user.passwd.empty')");
			e.show();
			$('#passwd21').parent().addClass('has-error');
			$('#passwd22').parent().addClass('has-error');
			return;
		}
		p.passwd = p1;
	}
	$.post('/user/forget', p, function(d){
		var e = $('#messageBox');
		e.find('label').html(d.message);
		e.show();
		if(d.state == 200) {
			if(phonephase == 0) {
				$('#pphonecode').show();
				phonephase = 1;
			} else if(phonephase == 1) {
				$('#pphonecode').hide();
				$('#phone').attr('readonly', 'readonly');
				$('label[for=phone]').hide();
				$('#phone').parent().addClass('has-success');
				$('#ppasswd21').show();
				$('#ppasswd22').show();
				phonephase = 2;
			} else if(phonephase == 2) {
				//ok
				setTimeout(function(){
					location.href = '/user/login';
				}, 2000);
			}
		}
	});
}

</script>
#parse('/user/foot.html')
	